@import '../basic/globalVar.scss';
@import '../mixins/index.scss';
@mixin res-grid($key, $map: $--media-points) {
  @if map-has-key($map, $key) {
    @media only screen and #{inspect(map-get($map, $key))} {
      &--span-#{$key}-0 {
        display: none;
      }
      @for $i from 0 through 24 {
        &--span-#{$key}-#{$i} {
          width: (1 / 24 * $i * 100) * 1%;
        }
        &--offset-#{$key}-#{$i} {
          margin-left: (1 / 24 * $i * 100) * 1%;
        }
        &--pull-#{$key}-#{$i} {
          position: relative;
          right: (1 / 24 * $i * 100) * 1%;
        }
        &--push-#{$key}-#{$i} {
          position: relative;
          left: (1 / 24 * $i * 100) * 1%;
        }
        &--order-#{$key}-#{$i} {
          order: $i;
        }
      }
      @content;
    }
  } @else {
    @warn 'Error, Not Set Media';
  }
}

@mixin colInit() {
  @for $i from 0 through 24 {
    &--span-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }
    &--offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }
    &--pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }
    &--push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
    &--order-#{$i} {
      order: $i;
    }
  }
}

@include classNameConnect(row) {
  display: block;
  position: relative;
  @include clear-float;
  @include b(flex) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    &:after {
      display: none;
    }
    @include b(flex-top) {
      align-items: flex-start;
    }
    @include b(flex-middle) {
      align-items: center;
    }
    @include b(flex-bottom) {
      align-items: flex-end;
    }
    @include b(flex-start) {
      justify-content: flex-start;
    }
    @include b(flex-end) {
      justify-content: flex-end;
    }
    @include b(flex-center) {
      justify-content: center;
    }
    @include b(flex-space-around) {
      justify-content: space-around;
    }
    @include b(flex-space-between) {
      justify-content: space-between;
    }
  }
}

@include classNameConnect(col) {
  float: left;
  flex: 0 0 auto;
  @include colInit();
  @include b(span-0) {
    display: none;
  }
  @include res-grid(xs);
  @include res-grid(sm);
  @include res-grid(md);
  @include res-grid(lg);
  @include res-grid(xl);
  @include res-grid(xxl);
}
